<template>
  <v-container fluid fill-height class="statistics-wrapper">
    <v-layout row wrap>
      <v-flex md12>
        <v-tabs v-model="tabs" fixed-tabs color="transparent" slot="extension" @input="getGameClicked">
          <v-tabs-slider color="primary"></v-tabs-slider>
          <v-tab v-for="(item, index) in toggleItems" :key="index" :href="`#${item.value}`" class="primary--text">
            <span class="title">{{ item.text }}</span>
          </v-tab>
        </v-tabs>
      </v-flex>
      <v-flex md12>
        <v-layout row wrap>
          <v-flex md3 sm1 class="px-1 my-4">
            <v-card color="white">
              <v-card-title class="title card-title-bg">今日</v-card-title>
              <v-divider></v-divider>
              <v-card-text class="subheading">
                <v-flex md12 d-flex justify-content-between class="left-border-green">
                  <span>总开: {{cards.today.totalRoom}} 间房</span>
                  <span>有效: {{cards.today.validRoom}} 间房</span>
                </v-flex>
              </v-card-text>
            </v-card>
          </v-flex>
          <v-flex md3 sm1 class="px-1 my-4 ">
            <v-card color="white">
              <v-card-title class="title card-title-bg">昨日</v-card-title>
              <v-divider></v-divider>
              <v-card-text class="subheading">
                <v-flex md12 d-flex justify-content-between class="left-border-red">
                  <span>总开: {{cards.yesterday.totalRoom}} 间房</span>
                  <span>有效: {{cards.yesterday.validRoom}} 间房</span>
                </v-flex>
              </v-card-text>
            </v-card>
          </v-flex>
          <v-flex md3 sm1 class="px-1 my-4 ">
            <v-card color="white">
              <v-card-title class="title card-title-bg">本月</v-card-title>
              <v-divider></v-divider>
              <v-card-text class="subheading">
                <v-flex md12 d-flex justify-content-between class="left-border-indigo">
                  <span>总开: {{cards.month.totalRoom}} 间房</span>
                  <span>有效: {{cards.month.validRoom}} 间房</span>
                </v-flex>
              </v-card-text>
            </v-card>
          </v-flex>
          <v-flex md3 sm1 class="px-1 my-4 ">
            <v-card color="white">
              <v-card-title class="title card-title-bg">上月</v-card-title>
              <v-divider></v-divider>
              <v-card-text class="subheading">
                <v-flex md12 d-flex justify-content-between class="left-border-green">
                  <span>总开: {{cards.lastMonth.totalRoom}} 间房</span>
                  <span>有效: {{cards.lastMonth.validRoom}} 间房</span>
                </v-flex>
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-flex>
      <v-flex md12>
        <v-layout row justify-start>
          <v-flex md3 class="mb-2 pt-2">
            <v-chip outline color="green" text-color="black">
              <v-avatar class="green accent-3 white--text subheading">{{roomstart.online}}</v-avatar>
              <span class="subheading">当前在线</span>
            </v-chip>
            <v-chip outline color="amber " text-color="black">
              <v-avatar class="amber  darken-4 white--text subheading">{{roomstart.starting}}</v-avatar>
              <span class="subheading">已开始</span>
            </v-chip>
            <v-chip outline color="light-blue" text-color="black">
              <v-avatar class="light-blue darken-1 white--text subheading">{{roomstart.unstarted}}</v-avatar>
              <span class="subheading">未开始</span>
            </v-chip>
          </v-flex>
          <v-flex md3>
            <v-layout row justify-space-around>
              <v-flex md6 sm1>
                <v-text-field mask="######" name="roomNo" :counter="6" label="房间号" v-model="queryForm.roomNo"></v-text-field>
              </v-flex>
              <v-flex md6 sm1>
                <v-btn @click="search" dark color="blue" class="mt-2">
                  <v-icon>search</v-icon>
                  <span class="subheading">搜索</span>
                </v-btn>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>

      </v-flex>

      <v-flex md12>
        <!-- 查询数据表格 -->
        <v-data-table :loading="showProgress" :headers="headers" :items="tableData" hide-actions class="elevation-1">
          <v-progress-linear slot="progress" color="teal" height="5" indeterminate></v-progress-linear>
          <template slot="items" slot-scope="props">
            <td class="text-xs-center subheading">{{ props.item.roomNo }}</td>
            <td class="text-xs-center subheading">{{ props.item.playerCount }}</td>
            <td class="text-xs-center subheading">{{ props.item.ruleType }}</td>
            <td class="text-xs-center subheading">{{ props.item.state ? '已开始' : '未开始' }}</td>
            <td class="text-xs-center subheading">
              <v-btn flat round dark color="cyan darken-3" class="mx-1" @click="roomDetails(props.item)">
                <span class="mx-1">详情</span>
                <v-icon color="cyan darken-3">more</v-icon>
              </v-btn>
            </td>
          </template>
          <!-- 没有数据时显示的提示 -->
          <template slot="no-data">
            <div class="text-md-center">
              <v-icon color="yellow darken-3">warning</v-icon>
              <span class="subheading">暂无数据</span>
            </div>
          </template>
        </v-data-table>
        <!-- 表格显示分页 -->
        <div class="text-xs-center my-2">
          <v-pagination @input="pageChange" :disabled="pageDisabled" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible"
            v-model="pagination.page"></v-pagination>
        </div>
      </v-flex>
    </v-layout>
    <v-dialog fullscreen hide-overlay transition="dialog-bottom-transition" v-model="dialog">
      <v-card>
        <v-toolbar card dark color="grey darken-4">
          <v-toolbar-title>
            <v-icon>assignment_ind</v-icon> 房间详情</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click.native="dialog = false" dark>
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <!-- 显示房间详细信息 -->
        <v-card-media class="white--text" height="120px">
          <v-layout row wrap class="py-3">
            <v-flex md1 class="px-5">
              <v-avatar size="72" tile>
                <img :src="roomMap.iconUrl" alt="">
              </v-avatar>
            </v-flex>
            <v-flex md2>
              <v-layout column>
                <span class="headline">房间号： {{roomMap.id}}</span>
                <span class="title">玩法： {{roomMap.ruleType}}</span>
              </v-layout>
            </v-flex>
            <v-flex md1>
              <v-btn @click="dismissRoom" class="title" prepend-icon="block" large dark round color="red accent-4">
                解散房间
                <v-icon class="pl-3">warning</v-icon>
              </v-btn>
            </v-flex>
          </v-layout>

        </v-card-media>
        <v-card-text>
          <v-container fluid grid-list-xl>
            <!-- 玩过的游戏统计 -->
            <v-layout row justify-center>
              <v-flex md8>
                <v-card>
                  <v-data-table :loading="showProgress" :headers="detailHeaders" :items="detailData" hide-actions class="elevation-2">
                    <v-progress-linear slot="progress" color="success" height="5" indeterminate></v-progress-linear>
                    <template slot="items" slot-scope="props">
                      <td class="text-xs-center">
                        <v-avatar size="36">
                          <img :src="props.item.headUrl" alt="">
                        </v-avatar>
                      </td>
                      <td class="text-xs-center subheading">{{ props.item.lftid }}</td>
                      <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
                      <td class="text-xs-center subheading ">
                        <v-btn flat round dark color="red" class="mx-1" @click="deletePlayer(props.item)">
                          <span class="mx-1">移除</span>
                          <v-icon color="red">delete_forever</v-icon>
                        </v-btn>
                      </td>
                    </template>
                    <template slot="no-data">
                      <div class="text-md-center">
                        <v-icon color="yellow darken-3">warning</v-icon>
                        <span class="subheading">暂无数据</span>
                      </div>
                    </template>
                  </v-data-table>
                </v-card>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>
      </v-card>
      <v-dialog v-model="modal" persistent max-width="290">
        <v-card>
          <v-card-title class="headline">注意!</v-card-title>
          <v-card-text class="title">{{modalText}}</v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="red darken-1" flat @click.native="modal = false">取消</v-btn>
            <v-btn color="green darken-1" flat @click.native="modal = false">确认</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-dialog>
  </v-container>
</template>

<script>
import * as game from "../../api/game";
export default {
  data: () => ({
    tabs: null,
    showProgress: false,
    dialog: false,
    modal: false,
    modalText: "",
    limit: 8,
    offset: 0,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    pageDisabled: false,
    queryForm: {
      roomNo: ""
    },
    cards: {
      today: {
        totalRoom: 0,
        validRoom: 0
      },
      yesterday: {
        totalRoom: 0,
        validRoom: 0
      },
      month: {
        totalRoom: 0,
        validRoom: 0
      },
      lastMonth: {
        totalRoom: 0,
        validRoom: 0
      }
    },
    roomstart: {
      online: 0,
      starting: 0,
      unstarted: 0
    },
    roomMap: {
      id: 0,
      ruleType: null,
      state: null,
      gameId: null,
      iconUrl: null
    },
    toggleItems: [
      {
        text: "经典斗牛",
        value: 1,
        gameId: "BULLFIGHT",
        url: "classic-bull.png"
      },
      { text: "斗公牛", value: 2, gameId: "OXFIGHT", url: "fight-bull.png" },
      { text: "点子牛", value: 5, gameId: "DIANZINIU", url: "dianzi-bull.png" },

      { text: "跑得快", value: 8, gameId: "RUNFAST", url: "runfast.png" },
      { text: "欢乐金花", value: 4, gameId: "JINHUA", url: "jinhua.png" },
      {
        text: "红中麻将",
        value: 3,
        gameId: "HONGZHONG",
        url: "hz-majiang.png"
      },
      {
        text: "平江扎鸟",
        value: 11,
        gameId: "PJMAHJONG",
        url: "pj-majiang.png"
      },
      {
        text: "长沙麻将",
        value: 10,
        gameId: "CSMAHJONG",
        url: "cs-majiang.png"
      },
      { text: "三公", value: 6, gameId: "SANGONG", url: "sangong.png" }
    ],
    headers: [
      { text: "房间号", value: "roomNo", align: "center", sortable: false },
      { text: "人数", value: "pcount", align: "center", sortable: false },
      { text: "玩法", value: "method", align: "center", sortable: false },
      { text: "状态", value: "status", align: "center", sortable: false },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    detailHeaders: [
      { text: "头像", value: "pcount", align: "center", sortable: false },
      { text: "ID", value: "method", align: "center", sortable: false },
      { text: "昵称", value: "status", align: "center", sortable: false },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    tableData: [],
    detailData: []
  }),
  mounted() {
    // 获取到对应的游戏类型
    // this.initialize();
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.refresh();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.refresh();
      });
    });
  },
  methods: {
    refresh() {
      this.isSearch = false;
      this.tabs = 1;
      this.offset = 0;
      this.pagination.page = 1;
      this.getRoomInfo();
    },
    // 获取房间信息
    getRoomInfo() {
      const qs = { limit: this.limit, offset: this.offset, type: this.tabs };

      this.showProgress = true;
      this.pageDisabled = true;
      game.getRoomInfo.r(qs).then(({ data }) => {
        let _data = data.data;
        this.showProgress = false;
        if (data.result === 0) {
          this.tableData = _data.dataList[0].state;
          this.cards = _data.dataList[0].time;
          this.roomstart = _data.dataList[0].roomstart;
          this.pagination.pageCount = Math.ceil(_data.totalCount / this.limit);
          this.pageDisabled = false;
        } else {
        }
      });

      // this.$http(opt, data => {
      //   let _data = data.data
      //   if (data.result === 0) {
      //     this.tableData = _data.dataList[0].state;
      //     this.cards = _data.dataList[0].time;
      //     this.roomstart = _data.dataList[0].roomstart;
      //     this.pagination.pageCount = Math.ceil(_data.totalCount / this.limit);
      //     this.pageDisabled = false;
      //   } else {
      //   }
      //     this.showProgress = false;

      // });
    },

    searchGameRoom() {
      const opt = { roomNo: this.queryForm.roomNo };
      this.showProgress = true;
      game.searchGameRoom.r(opt).then(({ data }) => {
        let _data = data.data;
        this.showProgress = false;
        if (data.result === 0) {
          this.tableData = [_data];
          this.pagination.pageCount = 1;
        } else {
        }
      });
    },
    getGameClicked() {
      this.limit = 8;
      this.offset = 0;
      this.getRoomInfo();
      // this.getRoomInfo(this.limit, this.offset, this.tabs);
    },
    initialize() {
      // this.tabs = 1;
      // 初始化页面信息
      // this.getRoomInfo();
      this.tableData = [
        {
          roomNo: 714521,
          playerCount: 4,
          ruleType: "轮庄",
          status: 1
        }
      ];

      this.cards = {
        today: {
          totalRoom: 314,
          validRoom: 285
        },
        yesterday: {
          totalRoom: 984,
          validRoom: 957
        },
        month: {
          totalRoom: 2752,
          validRoom: 2664
        },
        lastMonth: {
          totalRoom: 4125,
          validRoom: 3910
        }
      };
      this.roomstart = {
        online: 142,
        starting: 116,
        unstarted: 26
      };
    },
    roomDetails(item) {
      // this.detailData = [];
      // this.roomMap = Object.assign({}, item);
      // this.roomMap.id = item.roomNo;
      // // 找到当前选项下游戏信息
      // let room = this.toggleItems.find((item, index) => {
      //   return item.value == this.tabs;
      // });
      // this.roomMap.iconUrl = room.url;
      // this.dialog = true;
      // 请求房间详情
      // this.getRoomDetails(this.roomMap.id);
      console.log(item);
      let ruleType = encodeURI(item.ruleType);
      let state = +item.state;
      this.$router.push(
        `/game/roomdetails/:${
          item.roomNo
        }?ruleType=${ruleType}&state=${state}&gameId=${this.tabs}`
      );
    },
    deletePlayer(item) {
      this.modal = true;
      this.modalText = "确认移除该玩家吗?";
    },
    dismissRoom() {
      this.modal = true;
      this.modalText = "确认解散该房间吗?";
    },
    search() {
      if (this.queryForm.roomNo == "") {
        return $Vue.$emit("toggleSnackbar", {
          text: "请输入房间号搜索"
        });
      }
      this.searchGameRoom();
    },
    pageChange(page) {
      this.offset = (this.pagination.page - 1) * this.limit;
      this.getRoomInfo();
    }
  }
};
</script>

<style lang="less" scoped>
.date-wrapper {
  position: relative;
  .date-text {
    display: inline-block;
    width: 100px;
    height: 40%;
    border-bottom: 1px solid #909090;
    position: absolute;
    top: 18px;
    right: 0;
  }
}
</style>

